<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网络设置</title>
<link rel="stylesheet" href="/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/config.css">

<link rel="icon" href="favicon.png" type="image/png"/>

<script src="/script/jquery-1.10.2.js"></script>
<script src="/bootstrap-3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	
	    <div class="navbar-header">
	        <img alt="Brand" src="/image/logo.png">
	    </div>
    	
	 	<ul class="nav navbar-nav">
	 		<li><a>高清编码器配置操作平台</a></li>
	 	</ul>
 	
	 	<ul class="nav navbar-nav navbar-right">
	      <li><a href="support.html">更多服务与支持</a></li>
	    </ul>
 	
	</div>
</nav>
</div>

<div class="container">
	<div class="page-header text-center">
		<h3>网络设置</h3>
	</div>
	
    <div class="panel panel-default">
	  <div class="panel-heading">网络设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">网络设置</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-connection">
						<option value="wired">有线</option>
						<option value="wireless">无线</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">DHCP</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-dhcp">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">IP</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="IP" id="text-ip">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">子网掩码</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="子网掩码" id="text-mask">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">默认网关</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="默认网关" id="text-gate">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">DNS0</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="DNS0" id="text-dns0">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">DNS1</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="DNS1" id="text-dns1">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">MAC地址</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="MAC地址" readonly="readonly" id="text-mac">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setNetworkParam()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">WIFI设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi连接状态</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="未连接" readonly="readonly" id="text-wifi-state">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi IP</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="Wifi IP" id="text-wifi-ip">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi 子网掩码</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="Wifi 子网掩码" id="text-wifi-mask">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi 默认网关</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="Wifi 默认网关" id="text-wifi-gate">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">Wifi 加密类型</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-wifi-encrypt">
						<option value="0">不加密</option>
						<option value="1">WPA/WPA2</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi Essid</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="Wifi Essid" id="text-wifi-essid">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Wifi 密码</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="Wifi 密码" id="text-wifi-key">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setWifiParam()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>
</div>


<footer id="footer">
	<nav class="navbar navbar-default navbar-fixed-bottom">
	   <div class="center">
	      <ul class="nav navbar-nav">
	         <li><a href="index.html">状态显示</a></li>
	         <li><a href="network.html">网络设置</a></li>
	         <li><a href="master-video.html">主流编码设置</a></li>
	         <li><a href="sub-video.html">副流编码设置</a></li>
	         <li><a href="audio.html">音频编码设置</a></li>
	         <li><a href="system.html">系统设置</a></li>
	      </ul>
	   </div>
	   
	   	<div class="container center">
		<a href="#">高清编码器配置操作平台</a>
		</div>
	</nav>

</footer>




<script type="text/javascript">

function getBaseUri() {
	var baseUri="http://" + window.location.host;
	return baseUri;
}

$(document).ready(function() {
	$("#footer li:eq(1)").addClass("active");
	
	fetchNetworkParam();
	fetchWifiParam();
	
	$("#select-dhcp").change(function(){
		var disabled = $(this).get(0).selectedIndex != 0;
		disableNetwork(disabled);
	});
	
});


function disableNetwork(disabled) {
	$("#text-ip").prop('disabled', disabled);
	$("#text-gate").prop('disabled', disabled);
	$("#text-mask").prop('disabled', disabled);
	$("#text-dns0").prop('disabled', disabled);
	$("#text-dns1").prop('disabled', disabled);
}

function fetchNetworkParam() {
	$.getJSON(getBaseUri() + '/api/network', function(data) {
		var network = data;
		$("#select-connection").get(0).selectedIndex = network.connectionType;
		$("#select-dhcp").get(0).selectedIndex = network.dhcp;
		$("#text-ip").val(network.ip);
		$("#text-mask").val(network.mask);
		$("#text-gate").val(network.gate);
		$("#text-mac").val(network.mac);
		$("#text-dns0").val(network.dnsFirst);
		$("#text-dns1").val(network.dnsSecond);
		
		var disabled = ($("#select-dhcp").get(0).selectedIndex != 0);
		disableNetwork(disabled);
	});
}

function fetchWifiParam() {
	$.getJSON(getBaseUri() + '/api/wifi', function(data) {
		var wifi = data;
		
		var wifiState = wifi.state ? "已连接" : "断开";
		$("#text-wifi-state").val(wifiState);
		
		$("#text-wifi-ip").val(wifi.ip);
		$("#text-wifi-mask").val(wifi.mask);
		$("#text-wifi-gate").val(wifi.gate);
		$("#select-wifi-encrypt").val(wifi.encrypt);
		$("#text-wifi-essid").val(wifi.essid);
		$("#text-wifi-key").val(wifi.key);

		
	});
}

function setNetworkParam() {
	
	var network = {
		connectionType:  $("#select-connection").get(0).selectedIndex,
		dhcp : $("#select-dhcp").get(0).selectedIndex,
		ip: $("#text-ip").val(),
		mask: $("#text-mask").val(),
		gate: $("#text-gate").val(),
		mac: $("#text-mac").val(),
		dnsFirst: $("#text-dns0").val(),
		dnsSecond: $("#text-dns1").val()
	};
	
	var content = JSON.stringify(network);
	$.post(getBaseUri() + '/api/network', content, function(data){
		alert("设置成功，请重启设备。");
	});
}

function setWifiParam() {
	var wifi = {
		ip: $("#text-wifi-ip").val(),
		mask: $("#text-wifi-mask").val(),
		gate: $("#text-wifi-gate").val(),
		mac: $("#text-mac").val(),
		encrypt : $("#select-wifi-encrypt").val(),
		essid: $("#text-wifi-essid").val(),
		key: $("#text-wifi-key").val()
	};
	
	var content = JSON.stringify(wifi);
	$.post(getBaseUri() + '/api/wifi', content, function(data){
		alert("设置WiFi成功");
	});
}

</script>



</body>
</html>